<template>
  <fs-page class="fs-page-warp">
    <fs-crud ref="crudRef" v-bind="crudBinding" />
  </fs-page>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import {
  AddReq,
  CreateCrudOptionsProps,
  CreateCrudOptionsRet,
  DelReq,
  dict,
  EditReq,
  useFs,
  UserPageQuery,
  UserPageRes
} from "@fast-crud/fast-crud";
import {
  putV1OmsDept,
  postV1OmsDept,
  getV1OmsDeptTree,
  getV1OmsDeptDetail,
  deleteV1OmsDeptDetail
} from "@/api/oms/dept";
import { convertTreeToCustomFields } from "@/utils/tree";
import { hasAuth } from "@/router/utils";

//此处为crudOptions配置
const createCrudOptions = function ({
  crudExpose
}: CreateCrudOptionsProps): CreateCrudOptionsRet {
  //本地模拟后台crud接口方法 ----开始

  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
    const { data } = await getV1OmsDeptTree({
      ...query.page,
      ...query.form,
      ...query.sort
    });
    return {
      records: data.result,
      total: data.result.length
    };
  };

  const editRequest = async ({ form, row }: EditReq) => {
    const { data } = await putV1OmsDept({ id: row.id, ...form });
    return data;
  };

  const delRequest = async ({ row }: DelReq) => {
    const { data } = await deleteV1OmsDeptDetail(row);
    return data;
  };

  const addRequest = async ({ form }: AddReq) => {
    const { data } = await postV1OmsDept(form);
    return data;
  };
  const onRowBtnClick = async rowHandle => {
    if (rowHandle.initialForm.id) {
      const { data } = await getV1OmsDeptDetail({ id: rowHandle.row.id });
      crudExpose.setFormData(data);
    }
  };
  return {
    crudOptions: {
      request: {
        pageRequest,
        editRequest,
        delRequest,
        addRequest
      },
      form: {
        wrapper: {
          is: "el-drawer",
          size: "800px",
          onOpen: onRowBtnClick
        },
        initialForm: {
          sort: "0",
          status: 0
        },
        labelPosition: "right",
        labelWidth: "120px" //表单label宽度
      },
      actionbar: {
        buttons: {
          add: {
            show: hasAuth("oms:dept:add")
          }
        }
      },
      search: { autoSearch: false },
      rowHandle: {
        fixed: "right",
        buttons: {
          view: {
            type: "success",
            plain: true,
            show: hasAuth("oms:dept:detail")
          },
          edit: { show: hasAuth("oms:dept:update"), plain: true },
          remove: { show: hasAuth("oms:dept:remove"), plain: true }
        }
      },
      pagination: { show: false },
      columns: {
        name: {
          title: "部门名称",
          type: "text",
          search: { show: true },
          column: {
            show: true,
            resizable: true,
            minWidth: 140,
            align: "center"
          },
          editForm: { rules: [{ required: true, message: "请输入部门名称" }] },
          addForm: { rules: [{ required: true, message: "请输入部门名称" }] }
        },
        parentDeptId: {
          title: "上级部门",
          type: "dict-tree",
          form: {
            component: {
              props: {
                props: {
                  checkStrictly: true
                }
              },
              defaultExpandAll: true,
              checkStrictly: true
            }
          },
          dict: dict({
            isTree: true,
            label: "label",
            value: "id",
            getData: async () => {
              // 覆盖全局获取字典请求配置
              const { data } = await getV1OmsDeptTree();
              return convertTreeToCustomFields(
                [{ id: "0", name: "lafPureAdmin", children: data.result }],
                {
                  id: "id",
                  parent: "parentDeptId",
                  leader: "leaderStaffId",
                  name: "name"
                }
              );
            }
          }),
          search: { show: false },
          column: {
            show: false,
            resizable: true,
            minWidth: 140,
            align: "center"
          },
          editForm: { rules: [{ required: true, message: "请选择部门" }] },
          addForm: { rules: [{ required: true, message: "请选择部门" }] }
        },
        createTime: {
          title: "创建时间",
          type: "date",
          search: { show: false },
          column: {
            show: false,
            resizable: true,
            minWidth: 140,
            align: "center"
          },
          editForm: { show: false },
          addForm: { show: false }
        },
        editTime: {
          title: "编辑时间",
          type: "date",
          search: { show: false },
          column: {
            show: false,
            resizable: true,
            minWidth: 140,
            align: "center"
          },
          editForm: { show: false },
          addForm: { show: false }
        },
        id: {
          title: "ID",
          type: "text",
          search: { show: false },
          column: {
            show: false,
            resizable: true,
            minWidth: 140,
            align: "center"
          },
          editForm: { show: false },
          addForm: { show: false }
        },
        // leader: {
        //   title: "负责人",
        //   search: { show: false },
        //   type: "text",
        //   column: {
        //     show: false,
        //   },
        //   editForm: { show:false },
        //   addForm: { show:false }
        // },
        // leaderStaffId: {
        //   title: "负责人",
        //   search: { show: false },
        //   type: "dict-select",
        //   dict: dict({
        //     label: "nickName",
        //     value: "id",
        //     getData: async () => {
        //       // 覆盖全局获取字典请求配置
        //       const { result } = await getV1OmsStaffSelector();
        //       console.log(result,">>>")
        //       return result
        //     }
        //   }),
        //   editForm: { rules: [{ required: true, message: "请输入ID" }] },
        //   addForm: { rules: [{ required: true, message: "请输入ID" }] }
        // },
        parentDeptName: {
          title: "父部门",
          type: "text",
          search: { show: false },
          column: {
            show: false,
            resizable: true,
            minWidth: 140,
            align: "center"
          },
          editForm: { show: false },
          addForm: { show: false }
        },
        status: {
          title: "状态",
          type: "dict-select",
          search: { show: true },
          column: {
            show: true,
            resizable: true,
            minWidth: 140,
            align: "center"
          },
          dict: dict({
            data: [
              { value: 0, label: "启用" },
              { value: 1, label: "停用" }
            ]
          }),
          editForm: { rules: [{ required: true, message: "请选择状态" }] },
          addForm: { rules: [{ required: true, message: "请选择状态" }] }
        },

        sort: {
          title: "显示顺序",
          type: "text",
          search: { show: false },
          column: {
            show: true,
            resizable: true,
            minWidth: 140,
            align: "center"
          },
          editForm: { rules: [{ required: true, message: "请输入显示顺序" }] },
          addForm: { rules: [{ required: true, message: "请输入显示顺序" }] }
        }
      }
    }
  };
};

//此处为组件定义
export default defineComponent({
  name: "omsdept",
  setup() {
    // 演示自定义变量传递, 将会传递给createCrudOptions
    const customValue: any = {};
    //  =======你可以简写为下面这一行========
    const { crudRef, crudBinding, crudExpose } = useFs({
      createCrudOptions,
      context: customValue
    });

    // 页面打开后获取列表数据
    onMounted(() => {
      crudExpose.doRefresh();
    });
    return {
      crudBinding,
      crudRef
    };
  }
});
</script>
